<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>jindo.LayerPosition - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class=""><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="selected">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


	
<div class="snb depth2 scrollbar">
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<h3 class="blind">jindo.LayerPosition 클래스</h3>
			<div class="smanuals">
		
				<h3>보기 옵션</h3>
				<ul class="api-options">
					<li class="api-show-inherited">
						<span id="checkbox-inherited">
							<span class="checkbox-mark checkbox-checked"></span>
							<input type="checkbox" id="api-show-inherited">
						</span><label for="api-show-inherited">상속받은 항목</label>

					</li>
					<li class="api-show-deprecated">
						<span id="checkbox-deprecated">
							<span class="checkbox-mark"></span>
							<input type="checkbox" id="api-show-deprecated">
						</span><label for="api-show-deprecated">폐지예정 항목</label>
					</li>
				</ul>
	
		        
		            <h3><a href="#manual">매뉴얼</a></h3>
		
		            <ul class="manuals">
		                
		                    <li class="manual">
		                        <a href="#manual_6a586bd6ae227a6ba2d98c96e8b06af1">기능과 동작 방식</a>
		                    </li>
		                
		                    <li class="manual">
		                        <a href="#manual_cbd30bb38edc7ffc879aabd5f479a2c7">기본 초기화 형태</a>
		                    </li>
		                
		            </ul>
		        

		        
		            <h3><a href="#demo">데모</a></h3>
		        
		
		        
		            <h3><a href="#constructor">생성자</a></h3>
		
		            <ul class="constructors extends">
		                
		                    <li class="">
		                        <a href="#constructor_jindo.LayerPosition">
		                            LayerPosition
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		            </ul>
		        
				
		        
		
		        
		            <h3><a href="#method">메서드</a></h3>
		
		            <ul class="methods extends">
		                
		                    <li class=" inherited-item">
		                        <a href="#method_attach" title="커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;등록한다.">
		                            attach()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_detach" title="커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.">
		                            detach()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_detachAll" title="등록된&nbsp;모든&nbsp;커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.">
		                            detachAll()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_fireEvent" title="이벤트를&nbsp;발생시킨다.">
		                            fireEvent()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getCurrentPosition" title="현재&nbsp;레이어의&nbsp;위치를&nbsp;구한다.">
		                            getCurrentPosition()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getElement" title="기준&nbsp;엘리먼트를&nbsp;구한다.">
		                            getElement()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getLayer" title="레이어&nbsp;엘리먼트를&nbsp;구한다.">
		                            getLayer()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getPosition" title="옵션에&nbsp;해당하는&nbsp;레이어의&nbsp;위치를&nbsp;구한다.">
		                            getPosition()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_option" title="옵션&nbsp;값을&nbsp;가져온다.">
		                            option()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_optionSetter" title="옵션의&nbsp;setter&nbsp;함수를&nbsp;가져온다.&nbsp;
옵션의&nbsp;setter&nbsp;함수는&nbsp;지정된&nbsp;옵션이&nbsp;변경되면&nbsp;수행되는&nbsp;함수이다.">
		                            optionSetter()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_setElement" title="기준&nbsp;엘리먼트를&nbsp;설정한다.">
		                            setElement()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_setLayer" title="레이어&nbsp;엘리먼트를&nbsp;설정한다.&nbsp;설정된&nbsp;엘리먼트는&nbsp;document.body에&nbsp;append된다.">
		                            setLayer()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_setPosition" title="레이어를&nbsp;지정된&nbsp;옵션에&nbsp;맞게&nbsp;위치시킨다.">
		                            setPosition()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		            </ul>
		        
		
		        
		
		        
		            <h3><a href="#event">이벤트</a></h3>
		
		            <ul class="events extends">
		                
		                    <li class="">
		                        <a href="#event_adjust" title="bAuto&nbsp;옵션&nbsp;값이&nbsp;true일&nbsp;때&nbsp;자동으로&nbsp;위치가&nbsp;조정된&nbsp;이후에&nbsp;발생">
		                            adjust
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_beforeAdjust" title="bAuto&nbsp;옵션&nbsp;값이&nbsp;true일&nbsp;때&nbsp;자동으로&nbsp;위치가&nbsp;조정되기&nbsp;전&nbsp;발생">
		                            beforeAdjust
		                            
		                            
		                        </a>   
		                    </li>
		                
		            </ul>
		        
		
		        
	
			</div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>

<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				
<!-- content -->
<div class="content">
	<h1 class="blind">
		LayerPosition
	</h1>

	<div class="tc-panel first">
		<dl class="relation">
		<dt>클래스</dt>
		<dd>jindo.LayerPosition
		    
	        
			<span class="btn_code"><a href="../files/source_jindo.LayerPosition.js.html#l7" title="view source code"><span class="blind">소스코드</span></a></span>
		</dd>

	    
	        <dt>상속</dt>
	        <dd>
	        	<a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a>
	        	
	        </dd>
	    

	    
		
	    
		
	    
		
		</dl>

		
		
		<div class="description"><p>레이어를 지정된 엘리먼트에 상대적으로 위치시켜주는 컴포넌트</p></div>
		
		
		<div class="remark">
			<strong>중요</strong>
	        <ul>
		    
		    	<li>위치를 설정할 레이어 엘리먼트는 document.body의 바로 아래에 존재해야야 한다.
	그렇지 않을 경우 강제로 document.body로 이동된다.</li>
		    
		    </ul>
		</div>
		

	    
	    
		<div class="qr_code">
			<strong>QR code</strong>
		
			<div id="QRView">
			<script type="text/javascript">

				document.write([
					'<img src="http://chart.apis.google.com/chart?cht=qr&chs=220x220&chl=',
					encodeURIComponent(location.href.replace(/#.*$/, '')),
					'&choe=UTF-8" />'
				].join(''));

			</script>
			</div>
		</div>	    
	    
		
	</div>

	<div class="tc-panel panel">

        
			<h2 class="noline">생성자</h2>
			
			<table class="tbl_board">
			<caption class="hide">생성자</caption>
			<colgroup>
			<col style="width:22px">
			<col />
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">생성자</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#constructor_jindo.LayerPosition" class="name">jindo.LayerPosition</a>
(el:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>, elLayer:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>, [htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])
 
						<p><p>컴포넌트를 생성한다.</p></p>
					</td>
					<td>jindo.LayerPosition</td>
					</tr>
	            
			</tbody>
			</table>
		

        

        
			<h2 class="noline">메서드</h2>
			
			<table class="tbl_board">
			<caption class="hide">메서드</caption>
			<colgroup>
			<col style="width:22px">
			<col style="">
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">메서드</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_attach" class="name">attach</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToAttach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>커스텀 이벤트 핸들러를 등록한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_detach" class="name">detach</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToDetach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>커스텀 이벤트 핸들러를 해제한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_detachAll" class="name">detachAll</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>등록된 모든 커스텀 이벤트 핸들러를 해제한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_fireEvent" class="name">fireEvent</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, oEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>이벤트를 발생시킨다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getCurrentPosition" class="name">getCurrentPosition</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>
 
						<p><p>현재 레이어의 위치를 구한다.</p></p>
					</td>
					<td>jindo.LayerPosition</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getElement" class="name">getElement</a>
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>
 
						<p><p>기준 엘리먼트를 구한다.</p></p>
					</td>
					<td>jindo.LayerPosition</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getLayer" class="name">getLayer</a>
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>
 
						<p><p>레이어 엘리먼트를 구한다.</p></p>
					</td>
					<td>jindo.LayerPosition</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getPosition" class="name">getPosition</a>
([htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>
 
						<p><p>옵션에 해당하는 레이어의 위치를 구한다.</p></p>
					</td>
					<td>jindo.LayerPosition</td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_option" class="name">option</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>옵션 값을 가져온다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_optionSetter" class="name">optionSetter</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>옵션의 setter 함수를 가져온다. 
옵션의 setter 함수는 지정된 옵션이 변경되면 수행되는 함수이다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_setElement" class="name">setElement</a>
(UNKNOWN:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>)
:<a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>기준 엘리먼트를 설정한다.</p></p>
					</td>
					<td>jindo.LayerPosition</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_setLayer" class="name">setLayer</a>
(레이어엘리먼트)
:<a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>레이어 엘리먼트를 설정한다. 설정된 엘리먼트는 document.body에 append된다.</p></p>
					</td>
					<td>jindo.LayerPosition</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_setPosition" class="name">setPosition</a>
([htPosition:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])
:<a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>레이어를 지정된 옵션에 맞게 위치시킨다.</p></p>
					</td>
					<td>jindo.LayerPosition</td>
					</tr>
	            
			</tbody>
			</table>
        

        
			<h2 class="noline">이벤트</h2>
			
			<table class="tbl_board">
			<caption class="hide">이벤트</caption>
			<colgroup>
			<col style="width:22px">
			<col style="">
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">이벤트</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_adjust" class="name">adjust</a>
						<p><p>bAuto 옵션 값이 true일 때 자동으로 위치가 조정된 이후에 발생</p></p>
					</td>
					<td>jindo.LayerPosition</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_beforeAdjust" class="name">beforeAdjust</a>
						<p><p>bAuto 옵션 값이 true일 때 자동으로 위치가 조정되기 전 발생</p></p>
					</td>
					<td>jindo.LayerPosition</td>
					</tr>
	            
			</tbody>
			</table>
        			
	</div>

    
        <div class="tc-panel">
			<h2 id="manual">매뉴얼</h2>
            
				<div id="manual_6a586bd6ae227a6ba2d98c96e8b06af1" class="manual item">
				    <h3>기능과 동작 방식</h3>
				    <div class="description"><p>jindo.LayerPosition 컴포넌트는 레이어를 특정 엘리먼트 기준으로 원하는 곳에 위치시킬 수 있는 컴포넌트다. LayerPosition은 특정 엘리먼트에 대햐 상대적으로 위치시키기 위해 다양한 옵션을 제공한다. 위치 설정 관련 옵션(sPosition, sAlign, sValign, nTop, nLeft)의 다양한 조합을 통해서 원하는 형태로 레이어를 위치 시키는 방법을 그림을 통해 설명한다.</p>

<h4>기준 엘리먼트 바깥쪽으로 레이어를 위치 시키는 경우</h4>

<p>sPosition의 값을 각각 "outside-top-left", "outside-top-right", "outside-bottom-left", "outside-bottom-right"으로 설정한 모습이다. nTop, nLeft 옵션을 통해 기준 엘리먼트와의 간격을 설정할 수 있다. 이 경우 sAling이나 sValign 속성은 적용되지 않는다.</p>

<p><img src="..\..\..\resource/jindo.LayerPosition/outside_out.png" alt="" title="" /></p>

<ul>
<li>레이어1 : sPosition 속성을 "outside-top-left"로 설정</li>
<li>레이어2 : sPosition 속성을 "outside-top-right"로 설정</li>
<li>레이어3 : sPosition 속성을 "outside-bottom-left"로 설정</li>
<li>레이어4 : sPosition 속성을 "outside-bottom-right"로 설정</li>
</ul>

<p>다음은 sPosition의 값이 "outside-top", "outside-bottom"인 경우의 모습이다. sPosition의 값이 "outside-top", "outside-bottom"인 경우 sAlign 옵션이 적용되고 이를 통해 좌우정렬 할 수 있다. sAlign은 "left", "center", "right"으로 설정할 수 있다. sAlign의 값이 "center"인 경우 nLeft 옵션이 적용되지 않는 모습을 볼 수 있다.</p>

<p><img src="..\..\..\resource/jindo.LayerPosition/outside_vin.png" alt="" title="" /></p>

<ul>
<li>레이어1 : sPosition은 "outside-top", sAlign은 "left"로 설정</li>
<li>레이어2 : sPosition은 "outside-top", sAlign은 "center"로 설정</li>
<li>레이어3 : sPosition은 "outside-top", sAlign은 "right"로 설정</li>
<li>레이어4 : sPosition은 "outside-bottom", sAlign은 "left"로 설정</li>
<li>레이어5 : sPosition은 "outside-bottom", sAlign은 "center"로 설정</li>
<li>레이어6 : sPosition은 "outside-bottom", sAlign은 "right"로 설정</li>
</ul>

<p>다음은 sPosition의 값이 "outside-left", "outside-right"인 경우의 모습이다. sPosition의 값이 "outside-left", "outside-right"인 경우 sValign 옵션이 적용되고 이를 통해 상하정렬 할 수 있다. sValign은 "top", "middle", "bottom"으로 설정할 수 있다. sValign의 값이 "middle"인 경우 nTop 옵션이 적용되지 않는 모습을 볼 수 있다.</p>

<ul>
<li>레이어1 : sPosition은 "outside-left", sValign은 "top"로 설정</li>
<li>레이어2 : sPosition은 "outside-left", sValign은 "middle"로 설정</li>
<li>레이어3 : sPosition은 "outside-left", sValign은 "bottom"로 설정</li>
<li>레이어4 : sPosition은 "outside-right", sValign은 "top"로 설정</li>
<li>레이어5 : sPosition은 "outside-right", sValign은 "middle"로 설정</li>
<li>레이어6 : sPosition은 "outside-right", sValign은 "bottom"로 설정</li>
</ul>

<h4>기준 엘리먼트 안쪽으로 레이어를 위치 시키는 경우</h4>

<p>기준 엘리먼트의 안쪽에 레이어를 위치시키는 모습이다. sPosition 값이 "inside-"로 시작되는 경우이다. "outside-"와 마찬가지로 "inside-top", "inside-bottom"의 경우 sAlign을 통해서 좌우 정렬이 가능하고 nLeft는 적용되지 않는다. 또한 "inside-left", "inside-right"의 경우 sValign을 통해서 상하 정렬이 가능하고 nTop은 적용되지 않는다.</p>

<p><img src="..\..\..\resource/jindo.LayerPosition/inside.png" alt="" title="" /></p>

<ul>
<li>레이어1 :
<ul><li>sPosition을 "inside-top-left"로 설정</li>
<li>sPosition은 "inside-top", sAlign은 "left"로 설정</li>
<li>sPosition은 "inside-left", sValign은 "top"으로 설정</li></ul></li>
<li>레이어2 : sPosition은 "inside-top", sAlign은 "center"로 설정</li>
<li>레이어3 :
<ul><li>sPosition을 "inside-top-right"로 설정</li>
<li>sPosition은 "inside-top", sAlign은 "right"로 설정</li>
<li>sPosition은 "inside-right", sValign은 "top"으로 설정</li></ul></li>
<li>레이어4 : sPosition은 "inside-left", sValign은 "middle"로 설정</li>
<li>레이어5 : sPosition을 "inside-center"로 설정</li>
<li>레이어6 : sPosition은 "inside-right", sValign은 "middle"로 설정</li>
<li>레이어7 :
<ul><li>sPosition을 "inside-bottom-left"로 설정</li>
<li>sPosition은 "inside-bottom", sAlign은 "left"로 설정</li>
<li>sPosition은 "inside-left", sValign은 "bottom"으로 설정</li></ul></li>
<li>레이어8 : sPosition은 "inside-bottom", sAlign은 "center"로 설정</li>
<li>레이어9 :
<ul><li>sPosition을 "inside-bottom-right"로 설정</li>
<li>sPosition은 "inside-bottom", sAlign은 "right"로 설정</li>
<li>sPosition은 "inside-right", sValign은 "bottom"으로 설정</li></ul></li>
</ul>

<h4>bAuto 옵션을 적용한 자동배치</h4>

<p>LayerPosition의 옵션 중 bAuto 값을 true로 설정하면 스크롤과 브라우저창의 크기가 변경될 때 레이어의 위치를 다시 조정한다. 또한 자동배치는 레이어의 위치가 화면에 보이지 않는 경우 대칭된 지점으로 위치를 조정하여 화면에 노출될 수 있도록 한다. 아래 그림과 같이 버튼 아래에 레이어를 위치시키고 창 크기를 줄여 레이어가 보이지 않게 되는 경우 버튼 하단에 있던 레이어는 상단으로 위치가 조정되는 모습을 볼 수 있다. 자동 배치 설정 상태에서 레이어가 상하좌우 어느곳에도 위치시킬 수 없는 경우 원래 레이어의 위치로 이동한다.</p>

<p><img src="..\..\..\resource/jindo.LayerPosition/bAuto_before.png" alt="" title="" /></p>

<p><img src="..\..\..\resource/jindo.LayerPosition/bAuto_after.png" alt="" title="" /></p>

<h4>자동배치 설정상태(bAuto가 true)인 경우 커스텀 이벤트 제어</h4>

<p>자동배치가 설정된 상태일 때 beforeAdjust와 adjust 커스텀 이벤트가 발생한다. beforeAdjust는 자동 배치에 의해 레이어의 위치가 조정되기 전에 발생한다. adjust는 조정된 후 발생하는 이벤트이다. beforeAdjust 이벤트를 통해 조정되기 전 현재 위치와 조정된 후 이동할 위치를 받을 수 있다. 이를 제어하여 특정 조건에 따라 자동 배치를 수행하지 않을 수도 있다.
다음 코드는 기준 엘리먼트 우측 하단에 레이어를 위치시키고 bAuto 옵션을 true로 설정한 예제이다.</p>

<pre class="code"><code class="prettyprint">var oLayerPosition = new jindo.LayerPosition(jindo.$("center"), jindo.$("layer"), {
    sPosition : "outside-right",
    sValign : "bottom",
    nTop : 0,
    nLeft : 10,
    bAuto:true
});
</code></pre>

<p>float:left;</p>

<div style="float:left;">
    <img src="..\..\..\resource/jindo.LayerPosition/custom_before0.png">
</div>

<div>
    <img src="..\..\..\resource/jindo.LayerPosition/custom_before1.png">
</div>

<p><img src="..\..\..\resource/jindo.LayerPosition/custom_before2.png" alt="" title="" /></p>

<p>그림에서 보는 것과 같이 창 크기가 변경됨에 따라 레이어가 노출되지 않는 경우 상하, 좌우 대칭 되는 곳으로 자동배치되고 있다. beforeAdjust 커스텀 이벤트를 통해 상하 대칭으로 자동배치 되지 않고 좌우 대칭으로만 조정되도록 제어할 수 있다.</p>

<pre class="code"><code class="prettyprint">var oLayerPosition = new jindo.LayerPosition(jindo.$("center"), jindo.$("layer"), {
    sPosition : "outside-right",
    sValign : "bottom",
    nTop : 0,
    nLeft : 10,
    bAuto:true
}).attach({
    beforeAdjust : function(oCustomEvent) {
        //좌우로만 자동 이동하도록 설정
        if (oCustomEvent.htAdjustedPosition.nTop &lt; oCustomEvent.htCurrentPosition.nTop) {
            // 이벤트 객체의 stop() 메서드를 호출하여 위치 조정이 되지 않도록 한다.
            // stop() 메서드를 호출하면 이후 adjust 이벤트는 발생하지 않는다.
            oCustomEvent.stop();
        }
    }
});
</code></pre>

<div style="float:left;">
    <img src="..\..\..\resource/jindo.LayerPosition/custom_after0.png">
</div>

<div>
    <img src="..\..\..\resource/jindo.LayerPosition/custom_after1.png">
</div>

<p><img src="..\..\..\resource/jindo.LayerPosition/custom_after2.png" alt="" title="" /></p>

<h4>Note</h4>

<ul>
<li>레이어의 사이즈가 fix되어있지 않는 경우 렌더링 오류가 발생한다.(IE)</li>
</ul></div>
				</div>
            
				<div id="manual_cbd30bb38edc7ffc879aabd5f479a2c7" class="manual item">
				    <h3>기본 초기화 형태</h3>
				    <div class="description"><h4>HTML</h4>

<pre class="code"><code class="prettyprint">&lt;body&gt;
    &lt;div id="center" class="center"&gt;center layer&lt;/div&gt;
    &lt;div id="layer" class="layer"&gt;layer&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>위치를 설정할 레이어 엘리먼트는 documeny.body의 바로 아래에 존재하여야 한다. 그렇지 않을 경우 강제로 body의 자식으로 위치시킨다.</p>

<h4>CSS</h4>

<p>위치를 설정할 레이어 엘리먼트는 position:absolute 스타일이 지정되어야 한다.</p>

<h4>JavaScript</h4>

<pre class="code"><code class="prettyprint">//include jindo.Componenet.js
//include jindo.LayerPosition.js

var oLayerPosition = new jindo.LayerPosition(jindo.$("center"), jindo.$("layer"));
</code></pre></div>
				</div>
            
        </div>
    

	
		<div class="tc-panel">
			<h2 id="constructor">생성자 세부 정보</h2>
	        
	            <div id="constructor_jindo.LayerPosition" class="constructor item">
	<h3>jindo.LayerPosition()
		<span>생성자</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.LayerPosition.js.html#l22" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>new jindo.LayerPosition
(el:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>, elLayer:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>, [htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])</code></div>
	<div class="description"><p>컴포넌트를 생성한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">el</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">기준이 되는 엘리먼트, document.body도 가능하다</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elLayer</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">위치를 설정할 레이어 엘리먼트</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name optional">htOption</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">옵션 객체</p>

	
	
    
        <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name optional">sPosition</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
        <span class="default">(기본값 : &quot;outside-bottom&quot;)</span>
    

    

    <p class="description">레이어를 띄울 위치를 설정, 총 17가지 위치 설정 가능.
	<ul>
	<li>"outside-top-left"</li>
	<li>"outside-top"</li>
	<li>"outside-top-right"</li>
	<li>"outside-right"</li>
	<li>"outside-bottom-right"</li>
	<li>"outside-bottom"</li>
	<li>"outside-bottom-left"</li>
	<li>"outside-left"</li>
	<li>"inside-top-left"</li>
	<li>"inside-top"</li>
	<li>"inside-top-right"</li>
	<li>"inside-right"</li>
	<li>"inside-bottom-right"</li>
	<li>"inside-bottom"</li>
	<li>"inside-bottom-left"</li>
	<li>"inside-left"</li>
	<li>"inside-center"</li>
	</ul></p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">sAlign</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
        <span class="default">(기본값 : &quot;left&quot;)</span>
    

    

    <p class="description">레이어의 위치가 top/bottom일 때 좌우 정렬 값.
	<ul>
	<li>"left"</li>
	<li>"center"</li>
	<li>"middle"</li>
	</ul></p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">sValign</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
        <span class="default">(기본값 : &quot;&quot;)</span>
    

    

    <p class="description">레이어의 위치가 left/right일 때 상하 정렬 값.
	<ul>
	<li>"top"</li>
	<li>"middle"</li>
	<li>"bottom"</li>
	</ul></p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">nTop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : 0)</span>
    

    

    <p class="description">기준 레이어와의 y좌표 차이</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">nLeft</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : 0)</span>
    

    

    <p class="description">기준 레이어와의 x좌표 차이</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name optional">bAuto</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
        <span class="default">(기본값 : false)</span>
    

    

    <p class="description">자동 정렬 여부. 스크롤과 브라우저창의 크기가 변경되거나 스크롤될 때 레이어 위치를 다시 조정한다.</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">var oLayerPosition = new jindo.LayerPosition(jindo.$("center"), jindo.$("layer26"), { 
    sPosition: "outside-bottom", //레이어를 띄울 위치. 총 17가지의 위치를 가질 수 있다.
    sAlign: "left", //레이어의 위치가 top/bottom일 때 좌우 정렬 값 "left" || "center" || "middle" 
    sValign: "", //레이어의 위치가 left/right일 때 상하 정렬 값 "top" || "middle" || "bottom"
    nTop: 0, //기준 레이어와의 y좌표의 차이
    nLeft: 0, //기준 레이어와의 x좌표의 차이
    bAuto: false //자동정렬 여부. 스크롤과 브라우저창의 크기가 변경될 때 레이어 위치를 다시 조정한다.
}).attach({
    beforeAdjust : function(oCustomEvent){
        //bAuto 옵션에 의해 자동으로 위치가 조정되기 전에 발생
        //이벤트 객체 oCustomEvent = {
        //  elLayer : {HTMLElement} 레이어 엘리먼트
        //  htCurrentPosition : {HashTable} 현재 위치
        //  htAdjustedPosition : {HashTable} 이동될 위치
        //}
        //oCustomEvent.stop(); 수행시 조정되지 않음
    },
    adjust : function(oCustomEvent){
        //bAuto 옵션에 의해 자동으로 위치가 조정된 이후에 발생
        //이벤트 객체 oCustomEvent = {
        //  elLayer : {HTMLElement} 레이어 엘리먼트
        //  htCurrentPosition : {HashTable} 조정된 현재 위치
        //}
    }
});
</code></pre><pre class="code"><code class="prettyprint">htOption.sPosition = "outside-top-left" || "outside-top" || "outside-top-right" || "outside-right" || "outside-bottom-right" || "outside-bottom" || "outside-bottom-left" || "outside-left" || "inside-top-left" || "inside-top" || "inside-top-right" || "inside-right" || "inside-bottom-right" || "inside-bottom" || "inside-bottom-left" || "inside-left" || "inside-center"
</code></pre>
            </div>
        </div>
    
    
    
    
    

    

</div>

<!--
	
-->
	        
	    </div>
    

	
	
	
		<div class="tc-panel">
			<h2 id="method">메서드 세부 정보</h2>
	        
	            
<div id="method_attach" class="method item inherited-item">
	<h3>attach()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l253" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>attach
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToAttach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></code></div>
	<div class="description"><p>커스텀 이벤트 핸들러를 등록한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트 명</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name">fHandlerToAttach</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">등록 할 커스텀 이벤트 핸들러</p>

	
	
    
        <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">oCustomEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">커스텀 이벤트 객체</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//이벤트 등록 방법 예제
//아래처럼 등록하면 appear 라는 사용자 이벤트 핸들러는 총 3개가 등록되어 해당 이벤트를 발생시키면 각각의 핸들러 함수가 모두 실행됨.
//attach 을 통해 등록할때는 이벤트명에 'on' 이 빠지는 것에 유의.
function fpHandler1(oEvent) { .... };
function fpHandler2(oEvent) { .... };

var oInst = new MyComponent();
oInst.onappear = fpHandler1; // 직접 등록
oInst.attach('appear', fpHandler1); // attach 함수를 통해 등록
oInst.attach({
    appear : fpHandler1,
    more : fpHandler2
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_detach" class="method item inherited-item">
	<h3>detach()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l297" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>detach
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToDetach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></code></div>
	<div class="description"><p>커스텀 이벤트 핸들러를 해제한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트 명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">fHandlerToDetach</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">등록 해제 할 커스텀 이벤트 핸들러</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//이벤트 해제 예제
oInst.onappear = null; // 직접 해제
oInst.detach('appear', fpHandler1); // detach 함수를 통해 해제
oInst.detach({
    appear : fpHandler1,
    more : fpHandler2
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_detachAll" class="method item inherited-item">
	<h3>detachAll()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l335" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>detachAll
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></code></div>
	<div class="description"><p>등록된 모든 커스텀 이벤트 핸들러를 해제한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">이벤트명. 생략시 모든 등록된 커스텀 이벤트 핸들러를 해제한다.</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//"show" 커스텀 이벤트 핸들러 모두 해제
oInst.detachAll("show");

//모든 커스텀 이벤트 핸들러 해제
oInst.detachAll();
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_fireEvent" class="method item inherited-item">
	<h3>fireEvent()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l180" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>fireEvent
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, oEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></code></div>
	<div class="description"><p>이벤트를 발생시킨다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">oEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">커스텀 이벤트 핸들러에 전달되는 객체.</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
	<p class="description">핸들러의 커스텀 이벤트객체에서 stop메서드가 수행되면 false를 리턴</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//커스텀 이벤트를 발생시키는 예제
var MyComponent = jindo.$Class({
    method : function() {
        this.fireEvent('happened', {
            sHello : 'world',
            nAbc : 123
        });
    }
}).extend(jindo.Component);

var oInst = new MyComponent().attach({
    happened : function(oCustomEvent) {
        alert(oCustomEvent.sHello + '/' + oCustomEvent.nAbc); // 결과 : world/123
    }
});

&lt;button onclick="oInst.method();"&gt;Click me&lt;/button&gt; 
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getCurrentPosition" class="method item">
	<h3>getCurrentPosition()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.LayerPosition.js.html#l480" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getCurrentPosition
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></code></div>
	<div class="description"><p>현재 레이어의 위치를 구한다.</p></div>

	
	<div class="remark">
		<h4>중요</h4>
	    
            <div class="example-content">설정된 css의 top, left 속성 값을 숫자 값으로 리턴한다.</div>
	    
	</div>
	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">(return value) htPosition = {
    nTop : (Number) 문서상의 y좌표
    nLeft : (Number) 문서상의 x좌표
} 
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getElement" class="method item">
	<h3>getElement()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.LayerPosition.js.html#l166" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getElement
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></code></div>
	<div class="description"><p>기준 엘리먼트를 구한다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getLayer" class="method item">
	<h3>getLayer()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.LayerPosition.js.html#l192" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getLayer
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></code></div>
	<div class="description"><p>레이어 엘리먼트를 구한다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getPosition" class="method item">
	<h3>getPosition()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.LayerPosition.js.html#l307" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getPosition
([htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></code></div>
	<div class="description"><p>옵션에 해당하는 레이어의 위치를 구한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name optional">htOption</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">옵션</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
	<p class="description">htPosition</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">oLayerPosition.getPosition({
    sPosition: "outside-bottom",
    sAlign: "left",
    sValign: "",
    nTop: 10, //지정되지 않으면 0으로 설정된다.
    nLeft: 10 //지정되지 않으면 0으로 설정된다.
}); 

(return value) htPosition = {
    nTop : (Number) 문서상의 y좌표
    nLeft : (Number) 문서상의 x좌표
} 
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_option" class="method item inherited-item">
	<h3>option()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l33" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>option
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></code></div>
	<div class="description"><p>옵션 값을 가져온다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">옵션의 이름</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></span>
	<p class="description">옵션의 값</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_optionSetter" class="method item inherited-item">
	<h3>optionSetter()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l126" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>optionSetter
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></code></div>
	<div class="description"><p>옵션의 setter 함수를 가져온다. 
옵션의 setter 함수는 지정된 옵션이 변경되면 수행되는 함수이다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">setter의 이름</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
	<p class="description">setter 함수</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_setElement" class="method item">
	<h3>setElement()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.LayerPosition.js.html#l176" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>setElement
(UNKNOWN:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>)
:<a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></code></div>
	<div class="description"><p>기준 엘리먼트를 설정한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">UNKNOWN</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description"> </p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></span>
	<p class="description">인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_setLayer" class="method item">
	<h3>setLayer()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.LayerPosition.js.html#l202" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>setLayer
(레이어엘리먼트)
:<a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></code></div>
	<div class="description"><p>레이어 엘리먼트를 설정한다. 설정된 엘리먼트는 document.body에 append된다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">레이어엘리먼트</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a> |  | <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">또는 엘리먼트의 id</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></span>
	<p class="description">인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_setPosition" class="method item">
	<h3>setPosition()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.LayerPosition.js.html#l447" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>setPosition
([htPosition:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])
:<a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></code></div>
	<div class="description"><p>레이어를 지정된 옵션에 맞게 위치시킨다.</p></div>

	
	<div class="remark">
		<h4>중요</h4>
	    
            <div class="example-content">css의 top, left 속성으로 위치를 설정한다.</div>
	    
	</div>
	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name optional">htPosition</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">위치에 대한 객체 (생략시, 설정된 옵션에 따라 자동으로 계산된다)</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></span>
	<p class="description">인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">oLayerPosition.setPosition({ nTop : 100, nLeft : 100 });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	    </div>
    
	
	
		<div class="tc-panel">
			<h2 id="event">이벤트 세부 정보</h2>
	        
	            <div id="event_adjust" class="event item">
	<h3>adjust
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.LayerPosition.js.html#l140" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>bAuto 옵션 값이 true일 때 자동으로 위치가 조정된 이후에 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elLayer</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">레이어 엘리먼트</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name">htCurrentPosition</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">조정된 현재 위치</p>

	
	
    
        <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">nTop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">가로 위치</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">nLeft</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">세로 위치</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// adjust 커스텀 이벤트 핸들링
oLayerPosition.attach("adjust", function(oCustomEvent) { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_beforeAdjust" class="event item">
	<h3>beforeAdjust
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.LayerPosition.js.html#l113" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>bAuto 옵션 값이 true일 때 자동으로 위치가 조정되기 전 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elLayer</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">레이어 엘리먼트</p>

	
	
    
</li>

<li class="param collapsed ">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name">htCurrentPosition</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">현재 위치</p>

	
	
    
        <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">nTop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">가로 위치</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">nLeft</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">세로 위치</p>

	
	
    
</li>

        </ul>
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name">htAdjustedPosition</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">이동될 위치</p>

	
	
    
        <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">nTop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">가로 위치</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">nLeft</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">세로 위치</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// beforeAdjust 커스텀 이벤트 핸들링
oLayerPosition.attach("beforeAdjust", function(oCustomEvent) { ... });
</code></pre><pre class="code"><code class="prettyprint">// 레이어 위치 조정되지 않도록 처리
oLayerPosition.attach("beforeAdjust", function(oCustomEvent) {
    oCustomEvent.stop();
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	    </div>
    

    
        <div class="tc-panel">
			<h2 id="demo">데모</h2>
			<div class="demo">
				<ul class="demo_list" id="demo_list">
		            
		                <li><a href="../../../demo/jindo.LayerPosition/1. sample0.html" id="demo_7b30688667876d34e099264a39e274f8" title="25개의&nbsp;레이어를&nbsp;간단하게&nbsp;배치해보는&nbsp;예제입니다." target="_blank">레이어&nbsp;배치</a></li>
		            
		                <li><a href="../../../demo/jindo.LayerPosition/2. sample1.html" id="demo_7ac331b0ec6981b46b95d1ab9ac0a8ac" title="하나의&nbsp;인스턴스로&nbsp;3개의&nbsp;레이어를&nbsp;배치하는&nbsp;예제입니다." target="_blank">하나의&nbsp;인스턴스로&nbsp;사용하는&nbsp;예제</a></li>
		            
		                <li><a href="../../../demo/jindo.LayerPosition/3. sample2.html" id="demo_9909a7f630cc8dc6dc58cc2e404696db" title="bAuto&nbsp;옵션을&nbsp;이용해&nbsp;창&nbsp;크기에&nbsp;따라&nbsp;원래&nbsp;위치에서&nbsp;상하,&nbsp;좌우&nbsp;대칭된&nbsp;위치로&nbsp;자동배치&nbsp;되는&nbsp;예제입니다." target="_blank">bAuto&nbsp;옵션을&nbsp;통한&nbsp;자동&nbsp;배치</a></li>
		            
		                <li><a href="../../../demo/jindo.LayerPosition/4. sample3.html" id="demo_2d652f2a9a18ed5921050248733693fa" title="자동배치&nbsp;설정시&nbsp;좌우&nbsp;대칭&nbsp;조정만&nbsp;되도록&nbsp;beforeAdjust&nbsp;이벤트를&nbsp;제어하는&nbsp;예제입니다.&nbsp;(새창에서&nbsp;창을&nbsp;리사이징하며&nbsp;확인하세요.)" target="_blank">beforeAdjust&nbsp;이벤트&nbsp;제어</a></li>
		            
		                <li><a href="../../../demo/jindo.LayerPosition/5. sample4.html" id="demo_c9d576c55387b6c5c8d36f7b7aa3aebe" title="리사이즈,&nbsp;스크롤과&nbsp;관계없이&nbsp;우측&nbsp;하단에&nbsp;고정되는&nbsp;레이어&nbsp;예제입니다.&nbsp;(새창에서&nbsp;창을&nbsp;리사이징하며&nbsp;확인하세요.)" target="_blank">고정&nbsp;레이어</a></li>
		            
		                <li><a href="../../../demo/jindo.LayerPosition/6. sample5.html" id="demo_ce2c8d987581e3f2f0b074b9aacd4e49" title="레이어가,&nbsp;기본적으로&nbsp;버튼의&nbsp;하단에&nbsp;배치되지만,&nbsp;공간이&nbsp;없는&nbsp;경우&nbsp;버튼의&nbsp;상단에&nbsp;배치되는&nbsp;예제입니다." target="_blank">기본으로&nbsp;하단&nbsp;노출</a></li>
		            
		                <li><a href="../../../demo/jindo.LayerPosition/7. sample6.html" id="demo_68270e134e528e8b1426fba3ee42d925" title="사이즈가&nbsp;변경되어도&nbsp;항상&nbsp;가운데에&nbsp;위치하는&nbsp;예제입니다." target="_blank">항상&nbsp;가운데에&nbsp;위치</a></li>
		            
		                <li><a href="../../../demo/jindo.LayerPosition/8. sample7.html" id="demo_77631c230748e32d00380a1a896d3e00" title="Foggy&nbsp;컴포넌트와&nbsp;함께&nbsp;사용하여&nbsp;Modal&nbsp;Layer를&nbsp;구현한&nbsp;예제입니다." target="_blank">Foggy&nbsp;컴포넌트와의&nbsp;조합</a></li>
		            
	            </ul>
				<div class="demo_example" id="demo_example">
					<div class="clipboard" style="display:block">
						<p class="description" id="demo_desc"></p>
						<iframe src="about:blank" id="demo_iframe" name="demo_iframe" width="100%" height="366" frameborder="0"></iframe>
					</div>
				</div>
				<button type="button" id="btn_external" class="btn_external">새창으로 열기</button>
			</div>
        </div>
    
	    
	
	
	<div class="btn_top" id="btn_top">
		<a title="맨위로" href="#"><span class="blind">맨위로</span></a>
	</div>	

</div>
<!-- // content -->

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>